<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';
import { onMounted } from 'vue';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  proto?: string,
}
const props = withDefaults(defineProps<Props>(), {
  proto: () => '',
});
type Emit = {
  (e: 'update:proto', value: string): void,
}
const emit = defineEmits<Emit>();

onMounted(() => {
  emit('update:proto', Enums.FILTER_ALL);
});

const onSelectorChange = (value: string) => {
  emit('update:proto', value);
};
</script>

<template>
  <ElSelect
    :model-value="props.proto"
    class="proto-type-selector"
    filterable
    @change="onSelectorChange"
  >
    <ElOption
      v-for="proto in Enums.AccessProtocol"
      :key="proto"
      :value="proto"
      :label="t(`accessProtocol.${proto}`)"
    />
  </ElSelect>
</template>

<i18n lang="yaml" locale="zh-CN">
  accessProtocol:
    all: '全部协议'
    1: 'ICMP'
    6: 'TCP'
    17: 'UDP'
    58: 'ICMPv6'
</i18n>
<i18n lang="yaml" locale="en-US">
  applicationType:
    all: 'All Proto'
    1: 'ICMP'
    6: 'TCP'
    17: 'UDP'
    58: 'ICMPv6'
</i18n>

<style lang="scss" scoped>
.proto-type-selector {
  width: 120px;
}
</style>
